<template>
<div class="content-list">
  <div class="cl-left">
    <recommend-view>
      <template v-slot:title>
        <span class="recom-span">特别推荐</span>
      </template>
      <template v-slot:content>
        <recom-item @clickrecitem="clickrecitem" :recommendList="recommendList"/>
      </template>
    </recommend-view>
    <recommend-view>
      <template v-slot:title>
        <span class="recom-span">最新发布</span>
      </template>
      <template v-slot:content>
        <recom-full @clickcontent="clickcontent" :blogList="blogList" :getBlogList="getBlogList" :totalPage="totalPage"/>
      </template>
    </recommend-view>
  </div>
  <div class="cl-right">
    <div class="cl-ri-b">
      <recommend-view>
        <template v-slot:title>
          <span>热门标签</span>
        </template>
        <template v-slot:content>
          <hot-tag/>
        </template>
      </recommend-view>
    </div>
    <div class="cl-ri-b">
      <recommend-view>
        <template v-slot:title>
          <span class="recom-span">热门文章</span>
        </template>
        <template v-slot:content>
          <article-item :hotList="hotList"/>
        </template>
      </recommend-view>
    </div>
  </div>
</div>
</template>

<script>
import {request} from 'network/request'
import RecommendView from 'components/content/recommendview/RecommendView'
import RecomItem from 'components/content/recommendview/RecomItem'
import RecomFull from 'components/content/recommendview/RecomFull'
import HotTag from 'components/content/hottag/HotTag'
import ArticleItem from 'components/content/article/ArticleItem'

export default{
  name: 'homemain',
  data(){
    return{
      /**
       * 推荐列表
       */
      recommendList: [],
      /**
       * 博客最新发布的列表
       */
      blogList: [],
      /**
       * 最新发布的分页条总页数
       */
      totalPage: 0,
      /**
       * 热门文章的列表
       */
      hotList: []

    }
  },
  mounted(){
    /**
     * 初始化博客推荐列表
     */
    this.getRecommendList();
    /**
     * 初始化博客的最新发布列表,从第一页开始
     */
    this.getBlogList(1);
    /**
     * 初始化右侧热门博客文章，
     */
    this.getBlogListByHot();
  },
  components: {
    RecommendView,
    RecomItem,
    RecomFull,
    HotTag,
    ArticleItem
  },
  methods: {
    clickrecitem() {
      console.log('+++');
    },
    clickcontent() {
      console.log('---');
    },
    /**
     * 获取博客推荐列表
     */
    getRecommendList(){
      request({
        url:'/blog/getBlogListByRecommend',
        method: 'get',
        xhrFields: {
          withCredentials: true
        }
      }).then(response => {
        this.recommendList = response.data
      }).catch(error => {
        this.$message.error('请求数据失败')
      })
    },
    /**
     * 获取博客最新列表
     */
    getBlogList(page){
      request({
        url:'/blog/getBlogList?page=' + page,
        method: 'get',
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true
      }).then(response => {
        this.blogList = response.data.data
        this.totalPage = response.data.totalPage
      }).catch(error => {
        this.$message.error('请求数据失败')
      })
    },
  /**
   *  获取热门文章列表
    */
    getBlogListByHot(){
      request({
        url:'/blog/getBlogListByHot',
        method: 'get',
        xhrFields: {
          withCredentials: true
        },
      }).then(response => {
        this.hotList = response.data
      }).catch(error => {
        this.$message.error('请求数据失败')
      })
    }
  }
}
</script>

<style scoped>

.cl-right span{
  font-size: 18px;
}
.cl-ri-b{
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 3px 1px #a1a1a18e;
}
</style>
